<template>
  <div>
    <div class="payHeader"><img src="@/assets/对.png" alt="" />购买成功</div>
    <ui class="tips">
        <li><span>充值账号</span><span></span>QQ:{{qqvalue}}</li>   
        <li><span>充值金额</span><span>Q币×{{qqCode}}</span></li>
        <li><span>积分余额</span><span>6666</span></li>
    </ui>
      <div  class="btnPosition">
    <img src="@/assets/组 8.png" alt="" @click="back">
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      qqCode:'',
      qqvalue:'5656789'
    }
  },
  methods:{
      back(){
          this.$router.push({'name':'Home'})
      }
  },
    watch:{
    $route:{
       immediate: true,
          handler() {
        if (this.$route.path == "/payAfter") {
        this.qqCode = this.$route.query.qqCode;
         this.qqvalue = this.$route.query.qqvalue;
        }
      },
    }
  }
}
</script>

<style lang="less" scoped>
.payHeader {
img {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: .5rem;
}
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 2rem;
  margin: 1rem auto;
   font-size: 0.3rem;
 color: #222;
 margin-bottom: 2rem;
}
.tips {
    width: 100%;
    li {
      margin: auto;
        display: inline-block;
        height: 1rem;
        width: 8.125rem;
        font-size: 0.4rem;
        color: #898989;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
.btnPosition {
  position: absolute;
  bottom: 3.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.75rem;
  img {
    width: 4rem;
  }
}
.barStyle {
  background-color: #222;
  color: #fff;
}
</style>